<script setup>
import { onMounted, ref } from 'vue'
import { ElMessage, ElMessageBox } from "element-plus";
import { useRoute, useRouter } from 'vue-router';
import { addBookCommentAPI } from '@/apis/post';
import { getCurrentInstance } from 'vue';
import { getAvatar } from '@/apis/getAvatar';
const { proxy } = getCurrentInstance();
const emit = defineEmits(['post-success']);
const title = ref('');
const content = ref('');
const route = useRoute();
const router = useRouter();
const img_url = ref('');
const post = () => {
  if (!content.value.trim()) {
    ElMessage({
      type: 'warning',
      message: '内容不能为空',
    });
    return;
  }

  ElMessageBox.confirm(
    '确定要发送这条帖子吗?',
    'Warning',
    {
      confirmButtonText: '是',
      cancelButtonText: '否',
      type: 'warning',
      draggable: true,
    }
  )
    .then(() => {
      const res = addBookCommentAPI(
        route.params.id,
        content.value,
        proxy
      )
      
      console.log(res.value);
       ElMessage({
        type: 'success',
        message: '发表成功',
      });
      emit('post-success');
      window.location.reload();
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消发送',
      });
    });
}
onMounted( async() => {
  const res = await getAvatar(proxy)
  console.log(res)
  img_url.value = res
})
</script>

<template>
  <div class="post">
    <p class="title">发送帖子</p>
    <div class="avatar">
      <el-avatar size="large">
        <img :src="img_url" alt="avatar">
      </el-avatar>
    </div>
    <div>
      <el-input type="textarea" placeholder="想说什么就大胆说出来吧..." class="content" v-model="content" show-word-limit
        :autosize="{ minRows: 2, maxRows: 10 }" maxlength="200"></el-input>
    </div>
    <div>
      <el-button size="large" type="primary" @click="post">点击发帖</el-button>
    </div>
  </div>
</template>

<style scoped>
.post {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.title {
  font-weight: bolder;
  font-size: 32px;
  margin: 20px;
}

.avatar {
  margin: 20px;
}

.content {
  margin: 20px;
  width: 400px;
}

.post-title {
  margin: 20px;
  width: 400px;
}
</style>